<template>
  <!-- 优惠券组件 -->
  <view class="coupon_component" v-if="!allHide">
    <scroll-view scroll-x="true" style=" white-space: nowrap; display: flex">
      <view v-for="(coupon, index) in couponList" :key="index" class="coupon_c">
        <view :data-id="coupon.id" :data-hasUse="coupon.hasUse" :data-index="index" @tap="getCoupon"
          :class="'boxCoupon ' + (coupon.couponType===1?'bg_orange':'') + '' + (coupon.couponType===2?'bg_green':'') + ' ' + (coupon.couponType===3?'bg_red':'') + ' ' + (coupon.couponType===0?'bg_blue':'') + ' ' + (coupon.hasUse?'bg_gray':'')">
          <view class="boxCoupon__scope">
            <view v-if="coupon.couponType===1 || coupon.couponType===3" class="boxCoupon__scope--price">
              <view class="boxCoupon__scope--price--left">
                <text class="coupon_title">{{coupon.discountAmount}}</text>
                元
              </view>
            </view>
            <view v-else class="boxCoupon__scope--price">
              <view class="boxCoupon__scope--price--left">
                <text class="coupon_title">{{coupon.discount}}</text>
                折
              </view>
            </view>
          </view>
          <!-- 使用规则 -->
          <view class="boxCoupon__rule">
            <view class="boxCoupon__rule--right" v-if="coupon.couponType===2 || coupon.couponType===3">
              满{{coupon.conditionAmount}}可使用
            </view>
            <view class="boxCoupon__rule--right" v-if="coupon.couponType===0 || coupon.couponType===1">
              无门槛使用
            </view>
          </view>
          <!-- 已领取图案 -->
          <view class="circle" v-if="coupon.hasUse">
            <view class="circle__inside">
              <view class="circle__inside--title">已领取</view>
            </view>
          </view>
          <view class="left_icon" v-if="couponType.style==='style2'"></view>
          <view class="right_icon" v-if="couponType.style==='style2'"></view>
        </view>
      </view>
    </scroll-view>
    <auth :authType="authType" @authClick="authClick"></auth>
  </view>
</template>

<script lang="ts">
  import {
    Component,
    Vue,
    Prop,
    Watch
  } from 'vue-property-decorator'
  import {
    getCouponCoup,
    getOneCoupon
  } from "@/api/modules/coupon";

  @Component({})
  export default class CouponComponent extends Vue {
    @Prop({
      type: Object
    })
    couponType: Object;
    @Watch("couponType")
    onPropUpdate() {
      this.formData = this.couponType
    }

    couponList: Array < any >= [""]
    isShow: boolean = false
    authType: boolean = false
    canGet: boolean = true
    formData: any = {}
    allHide: boolean = false




    // 组件周期函数--监听组件挂载完毕
    mounted() {    
      this.formData = this.couponType
        this.getCouponList();
        this.isShow = false,
          this.$emit("stopRoll", this.isShow);
    }

    appLaunchInit() {
      this.$Pubsub.on("app-launch", () => {
        this.getCouponList();
        let userinfo = {
          ...this.$store.state.userStore.userInfo,
          couponType: false
        }
        this.$store.commit("userStore/setUserInfo", userinfo)
        this.isShow = true,
          this.$emit("stopRoll", this.isShow);
      });
    }
    authClick(){
      this.setData({
          authType: false,
      });
    }

    /**
     * 获取首页优惠券
     */
    getCouponList() {
      const components = this.$store.state.settingStore.components;     
      const couponItem = components.filter(item => item.value === "Coupon");
      if (couponItem.length === 0) {        
        return;
      }
      const hide = couponItem[0].formData.hide;
      getCouponCoup({}).then(res => {       
        if (!res.length) return this.$emit("stopRoll", false);  
        const userInfo = this.$store.state.userStore.userInfo;
         if (userInfo.whetherAuthorization) {       
         res = this.filterList(res);   
        if (hide) {
          const resdata = JSON.parse(JSON.stringify(res));
            res = resdata.filter(item => { 
            return item.restNum !== 0;
          }); 
          }     
        }
        this.allHide = res.length === 0 ? true : false
        this.couponList = res
        this.canGet = true
      });
    }

    /**
     * 过滤优惠券数据
     */
    filterList(res) {
      const list = res.filter((item, index) => {
        item.hasUse =
          item.totalAvailable > 0 && item.available > 0 ? false : true;
        item.index = index;
        item.restNum =
          item.available > item.totalAvailable ?
          item.totalAvailable :
          item.available;
        return this.formData.hide ? item.available : true;
      });
      return [...list];
    }

    /**
     * 领取优惠券
     * @param options
     */
    getCoupon(options) {
      const {
        index,
        id,
        hasuse
      } = options.currentTarget.dataset;
      const userInfo = this.$store.state.userStore.userInfo;
      if (hasuse) return;
      if (!userInfo.whetherAuthorization) {
        this.authType = true
        this.isShow = false
        return;
      }
      const currentItem = this.couponList[index];
      getOneCoupon(id, {})
        .then(() => {
          currentItem.restNum = currentItem.restNum - 1;
          if (currentItem.restNum === 0) {
            currentItem.hasUse = !currentItem.hasUse;
          }
          this.couponList[index] = currentItem,
            uni.showToast({
              title: "领取成功",
              icon: "none",
              duration: 500
            });
        })
        .catch(() => {
          uni.showToast({
            title: "优惠券已被领光",
            icon: "none",
            duration: 1000
          });
          currentItem.hasUse = !currentItem.hasUse;
          this.couponList[index] = currentItem
        });
    }
  }
</script>

<style lang="scss" scoped>
  .coupon_component {
    background: #fff;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px;

    .coupon_c {
      display: inline-block;
      margin-right: 10px;
    }

    .boxCoupon {
      width: 150px;
      height: 75px;
      display: inline-block;
      background: #ccc;
      overflow: hidden;
      position: relative;
    }

    .left_icon {
      width: 6px;
      height: 75px;
      position: absolute;
      background-image: url("https://imagesize.hrwork.com/sp/files/a0be5a1f-9c89-4ce7-8148-773e3972657f.png");
      background-size: 100% 100%;
      left: 0;
      top: 0;
    }

    .right_icon {
      width: 6px;
      height: 75px;
      position: absolute;
      background-image: url("https://imagesize.hrwork.com/sp/files/b96e2952-4eea-48a7-89bb-e0e489d90333.png");
      background-size: 100% 100%;
      right: 0;
      top: 0;
    }

    .bg_orange {
      background-color: rgba(246, 164, 44, 1);
    }

    .bg_red {
      background-color: rgba(252, 92, 123, 1);
    }

    .bg_green {
      background-color: rgba(31, 222, 148, 1);
    }

    .bg_blue {
      background-color: rgba(116, 211, 215, 1);
    }

    .bg_gray {
      background-color: #ccc;
    }

    .boxCoupon__scope {
      .boxCoupon__scope--price--left {
        font-size: 14px;
        text-align: center;
        color: #fff;

        .coupon_title {
          font-size: 36px;
        }
      }
    }

    .boxCoupon__rule {
      .boxCoupon__rule--right {
        font-size: 14px;
        text-align: center;
        color: #fff;
      }
    }

    .circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 100%;
      border: 2px solid #999999;
      position: absolute;
      top: 0px;
      right: 0px;
    }

    .circle__inside {
      width: 36px;
      height: 36px;
      border-radius: 100%;
      border: 1px solid #999999;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .circle__inside--title {
      position: relative;
      top: 0px;
      left: 0px;
      font-size: 12px;
      transform: rotate(-15deg);
      color: #999999;
    }
  }
</style>